<template>
  <div class="cmt-comment">
    <h3>发表评论</h3>
    <hr>
    <textarea placeholder="请输入要BB的内容（最多吐槽120字 4行30列）" cols="30" rows="4" maxlength="120"></textarea>
    <mt-button type="primary" size="large">发表评论</mt-button>
    <div class="cmt-list">
      <div class="cmt-item" v-for="(item, i) in comments" :key="item.id">
        <div class="cmt-title">
          第{{i+1}}楼&nbsp;&nbsp;用户：{{item.user_name}}&nbsp;&nbsp;发表时间：{{ item.add_time | dateFormat }}
        </div>
        <div class="cmt-body">
          {{ item.content === 'undefined' ? '此用户很懒，屁都不放一个' : item.content }}
        </div>
      </div>
    </div>
    <mt-button type="danger" size="large" plain>加载更多</mt-button>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        pageIndex: 1,
        comments: []
      }
    },
    created(){
      this.getComments()
    },
    methods: {
      getComments () {
        this.$http.get('api/getcomments/'+this.id+'?pageindex=' + this.pageIndex).then((result) => {
          if (result.body.status ===0) {
            this.comments = result.body.message;
            console.log(this.comments);
          } else {
            Toast('获取评论失败')
          }
        })
      }
    },
    props:['id']
  }
</script>

<style lang="scss" scoped>
  .cmt-comment {
    h3 {
      font-size: 13px
    }
    textarea {
      font-size: 14px;
      height: 85px;
      margin: 0;
    }
    .cmt-list {
      margin: 10px 0;
      .cmt-item {
        font-size: 13px;
        .cmt-title {
          line-height: 30px;
          background-color: skyblue;
        }
        .cmt-body{
          line-height: 35px;
          text-indent: 2em;
        }
      }
    }
  }
</style>
